#{extends 'account_layout.html'/}
#{set activedMenu:"修改头像"/}
    <div class="user_main">
        <div class="main_ttl">修改头像</div>
       #{if flash.error != null}
            ${flash.error}
        #{/if}
        <div class="main_form">
        <!--
        <link href="http://www.pelink.cn/css/config.css" rel="stylesheet" type="text/css" />-->
        <!--
        <link href="http://www.pelink.cn/css/main.css" rel="stylesheet" type="text/css" />

        <script type="text/javascript" src="http://www.pedaily.cn/top/js/jQuery-1.6.4.min.js"></script>
        <script type="text/javascript" src="/js/tbase.js"></script>
        <script type="text/javascript" src="http://www.pedaily.cn/top/js/sha1.js"></script>
        <script type="text/javascript" src="jquery.upload.js"></script>
        <script type="text/javascript" src="http://www.pelink.cn/js/main.js"></script>-->
        <script type="text/javascript" src="@{'/public/javascripts/jquery.upload.js'}"></script>



        <div class="clear"></div>
    </div>
        <form name="avatarForm" method="post" action="@{Test.saveAvatar()}" enctype="multipart/form-data" id="avatarForm" onsubmit="return false;" style="float:left;width:670px;">

            <div class="m_b_10">

                <div class="tabbody">
                    <div class="black_lump">
                        <span class="icon_lamp left">&nbsp;</span>
                        <div class="msgtxt">
                            贴心提示：
                            <ul class="msglist">
                                <li>上传自己的形象头像，让更多的人关注您，创造更多商机。</li>
                                <li>上传图像，建立自己满意的图片区域选区，然后点击“保存我的头像”。</li>

                            </ul>
                        </div>
                    </div>

                    <table>
                        <tbody id="photo_tbody">
                        <tr>
                            <td scope="col" align="center" style="width:450px;">
                                <iframe id="photo_upload" name="photo_upload" style="display:none;"></iframe>
                                <input type="file" id="photo_url" name="avatar" />
                                <span id="uploading"></span>
                                <br />
                                <span style="color:#999;">请选择jpg、gif、png格式，且文件大小不超过2M的图片</span>
                            </td>
                            <td align="left">
                            </td>
                        </tr>
                        <tr>
                            <td align="center">
                                <img id="photo_img" src="${avatarURL}" alt="Cretu"  style="width:213px;" />
                                <br /><br />
                                <input type="button" id="savephoto" value="保存我的头像" class="submitbtn"/>
                                <br />
                                <span id="savephotomsg" style="display:inline-block;"></span>
                            </td>
                            <td align="left">
                                <table id="previewstable">
                                    <tr>
                                        <td align="left">
                                            <div style="position:relative;overflow:hidden;width:180px;height:180px;">
                                                <img id="img_big" src="http://pic.pedaily.cn/blog/hi.jpg" alt="Cretu" width="180"/>
                                            </div>
                                            <span style="color:#999;">大头像尺寸，180*180像素(px)</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td align="left">
                                            <div style="position:relative;overflow:hidden;width:120px;height:120px;">
                                                <img id="img_middle" src="http://pic.pedaily.cn/blog/hi.jpg" alt="Cretu" width="120"/>
                                            </div>
                                            <span style="color:#999;">中等头像尺寸，120*120像素(px)</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td align="left">
                                            <div style="position:relative;overflow:hidden;width:50px;height:50px;">
                                                <img id="img_small" src="http://pic.pedaily.cn/blog/hi.jpg" alt="Cretu" width="50"/>
                                            </div>
                                            <span style="color:#999;">小头像尺寸，50*50像素(px)</span>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <input type="hidden" name="x1" />
                <input type="hidden" name="y1" />
                <input type="hidden" name="x2" />
                <input type="hidden" name="y2" />
                <input type="hidden" name="width" />
                <input type="hidden" name="height" />
                <div class="clear"></div>
            </div>
            <div class="clear"></div>
        </form>
<script type="text/javascript" charset="utf-8" src="@{'/public/javascripts/jquery.imgareaselect.pack.js'}"></script>
<script type="text/javascript">

    function preview(img, selection) {
        if (!selection.width || !selection.height)
            return;
        var imgwidth = $('#photo_img').width(), imgheight = $('#photo_img').height();
        if ($('#img_big').attr('src') != $('#photo_img').attr('src')) {
            var vsrc = $('#photo_img').attr('src');
            $('#img_big').attr('src', vsrc);
            $('#img_middle').attr('src', vsrc);
            $('#img_small').attr('src', vsrc);
        }
        $('#img_big').css({
            width: Math.round((180 / selection.width) * imgwidth),
            height: Math.round((180 / selection.height) * imgheight),
            marginLeft: -Math.round((180 / selection.width) * selection.x1),
            marginTop: -Math.round((180 / selection.height) * selection.y1)
        });

        $('#img_middle').css({
            width: Math.round((120 / selection.width) * imgwidth),
            height: Math.round((120 / (selection.height || 1)) * imgheight),
            marginLeft: -Math.round((120 / selection.width) * selection.x1),
            marginTop: -Math.round((120 / (selection.height || 1)) * selection.y1)
        });

        $('#img_small').css({
            width: Math.round((50 / selection.width) * imgwidth),
            height: Math.round((50 / selection.height) * imgheight),
            marginLeft: -Math.round((50 / selection.width) * selection.x1),
            marginTop: -Math.round((50 / selection.height) * selection.y1)
        });
    }

    $(function () {
        $('#photo_img').imgAreaSelect({ x1: 0, y1: 0, x2: 180, y2: 180 });

        var selobjs = $('#photo_img').imgAreaSelect({
            aspectRatio: '1:1',
            //            minWidth: 180,
            //            minHeight: 180,
                        x1: 0, y1: 0,
            x2: $('#photo_img').width(),
            y2: $('#photo_img').height(),
            onSelectChange: preview,
            parent: $('#photo_img').parent(),
            onSelectEnd: function (img, selection) {
                $('input[name="x1"]').val(selection.x1);
                $('input[name="y1"]').val(selection.y1);
                $('input[name="x2"]').val(selection.x2);
                $('input[name="y2"]').val(selection.y2);
                $('input[name="width"]').val(selection.width);
                $('input[name="height"]').val(selection.height);
            }
        });

        $('#photo_url').change(function () {
            /*var form = $('#avatarForm');
            form.attr('action', '@{Users.saveAvatar()}').attr('method', 'post')
                    .attr('encoding', 'multipart/form-data')
                    .attr('enctype', 'multipart/form-data');
            //.attr('target', 'photo_upload');
            //form[0].onsubmit = function () { };
            alert(2);
            form.submit();
			$.post("@{Users.saveAvatar()}",{avatar:avatar},function(){alert(2);});*/
            $.upload({
                // 上传地址
                url: '@{Users.saveAvatar()}',
                // 文件域名字
                fileName: 'avatar',
                // 其他表单数据
                //params: {name: 'pxblog'},
                // 上传完成后, 返回json, text
                dataType: 'json',
                // 上传之前回调,return true表示可继续上传
                onSend: function() {
                    $('#uploading').html('正在上传... ...');
                    return true;
                },
                // 上传之后回调
                onComplate: function(data) {
                    alert(data);
                }
            });
        });

    });

    //savephoto
    $obj('savephoto').onclick = function () {
        if ($('#photo_img').attr('src').indexOf('pic.pedaily.cn') == -1) {
            $obj('savephotomsg').className = 'itsok';
            $obj('savephotomsg').innerHTML = '<i></i>保存成功。';
            setTimeout(function () { $obj('savephotomsg').style.display = 'none'; }, 1000);
            return;
        }

        var ibig = $('#img_big'), imiddle = $('#img_middle'), ismall = $('#img_small');
        var query = [];
        query.push(String.format('big={0},{1},{2},{3}', ibig.width(), ibig.height(), ibig.css('marginLeft').replace(/[^\d]/g, ''), ibig.css('marginTop').replace(/[^\d]/g, '')));
        query.push(String.format('middle={0},{1},{2},{3}', imiddle.width(), imiddle.height(), imiddle.css('marginLeft').replace(/[^\d]/g, ''), imiddle.css('marginTop').replace(/[^\d]/g, '')));
        query.push(String.format('small={0},{1},{2},{3}', ismall.width(), ismall.height(), ismall.css('marginLeft').replace(/[^\d]/g, ''), ismall.css('marginTop').replace(/[^\d]/g, '')));

        $('#savephoto').val('请稍候...').attr('disabled', true);
        $.ajax({
            url: "/account/savephoto.v2.aspx?action=savethumbnail&t=" + Math.random(),
            type: 'POST',
            data: query.join('&'),
            error: function () {
                $('#savephoto').val('保存我的头像').removeAttr('disabled');
                $obj('savephotomsg').className = 'txt_err';
                $obj('savephotomsg').innerHTML = '<i></i>出现错误。';
            },
            success: function (d) {
                if (d == '200') {
                    $obj('savephotomsg').className = 'itsok';
                    $obj('savephotomsg').innerHTML = '<i></i>保存成功。';
                } else {
                    $obj('savephotomsg').className = 'txt_err';
                    $obj('savephotomsg').innerHTML = '<i></i>出现错误。';
                }
                $('#savephoto').val('保存我的头像').removeAttr('disabled');
                $obj('savephotomsg').style.display = 'inline-block';
                setTimeout(function () {
                    $obj('savephotomsg').style.display = 'none';
                }, 1500);
            }
        });
    }
</script>
</div>